import "package:flutter/material.dart";
import "package:flutter_mobx/flutter_mobx.dart";
import "package:go_router/go_router.dart";
import "package:hinge/common/values/icon.dart";
import "package:hinge/store/root_store.dart";
import "package:ducafe_ui_core/ducafe_ui_core.dart";

class MainPage extends StatefulWidget {
  final Widget child;

  const MainPage({super.key, required this.child});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  final _rootStore = RootStore();
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder:
          (_) => Scaffold(
            extendBody: true,
            resizeToAvoidBottomInset: false,
            body: SafeArea(
              bottom: false,
              top: false,
              child: Stack(
                children: [
                  // 主内容
                  widget.child,

                  // 底部导航栏
                  Positioned(
                    bottom: 22.h,
                    left: 0,
                    right: 0,
                    child: _buildCustomNavBar(context),
                  ),
                ],
              ),
            ),
          ),
    );
  }

  Widget _buildCustomNavBar(BuildContext context) {
    final currentIndex = _rootStore.mainStore.currentIndex;
    final screenWidth = MediaQuery.of(context).size.width;

    final double btnSize = 88.w;
    final double totalWidth = 328.w; // 总宽度为328

    final double overlap = 8.w;

    // 计算每个按钮的左侧位置
    final double startX = (screenWidth - totalWidth) / 2;
    final double secondX = startX + btnSize - overlap;
    final double thirdX = secondX + btnSize - overlap;
    final double fourthX = thirdX + btnSize - overlap;

    return Container(
      height: 120.h,
      padding: EdgeInsets.symmetric(vertical: 15.h),
      decoration: const BoxDecoration(color: Colors.transparent),
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 推荐
          Positioned(
            left: startX,
            child: _buildCircleNavButton(
              icon: IconFont.recommend,
              isSelected: currentIndex == 0,
              onTap: () {
                _rootStore.mainStore.changeTab(0);
                context.go('/');
              },
            ),
          ),

          // 笔记
          Positioned(
            left: secondX,
            child: _buildCircleNavButton(
              icon: IconFont.edit,
              isSelected: currentIndex == 1,
              onTap: () {
                _rootStore.mainStore.changeTab(1);
                context.go('/note');
              },
            ),
          ),

          // 消息
          Positioned(
            left: thirdX,
            child: _buildCircleNavButton(
              icon: IconFont.message,
              isSelected: currentIndex == 2,
              onTap: () {
                _rootStore.mainStore.changeTab(2);
                context.go('/message');
              },
            ),
          ),

          // 百科
          Positioned(
            left: fourthX,
            child: _buildCircleNavButton(
              icon: IconFont.encyclopedia,
              isSelected: currentIndex == 3,
              onTap: () {
                _rootStore.mainStore.changeTab(3);
                context.go('/encyclopedia');
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCircleNavButton({
    required IconData icon,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 88.w,
        height: 88.h,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.51, 0.09),
            end: Alignment(0.51, 0.86),
            colors: [const Color(0xFFA895FD), const Color(0xFFBE88FF)],
          ),
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Color(0xFFB09DFF).withOpacity(0.3),
              blurRadius: 15,
              spreadRadius: 0,
              offset: const Offset(0, 6),
            ),
          ],
        ),
        child: Center(
          child:
              isSelected
                  ? Container(
                    width: 70.w,
                    height: 70.h,
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.2),
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: Icon(icon, color: Colors.white, size: 32.w),
                    ),
                  )
                  : Icon(icon, color: Colors.white, size: 32.w),
        ),
      ),
    );
  }
}
